<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="ztree/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>
    <script src="ztree/jquery-1.4.4.min.js"></script>
    <script src="ztree/jquery.ztree.all.js"></script>


    <style type="text/less">
        @input-placeholder-color: red;
        input::-webkit-input-placeholder {
            color: @input-placeholder-color;
        }

        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: @input-placeholder-color;
        }

        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: @input-placeholder-color;
        }

        input:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: @input-placeholder-color;
        }

        @input-chased-department: blue;
        #chasedDepartment {
            color: @input-chased-department;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.js"></script>
    <title>Document</title>
</head>
<body>
<div style="background: #f0f6e4;width: 220px;">
    选中的部门:
    <input id="chasedDepartment" disabled="disabled" placeholder="没有选中部门" department=""/>
</div>
<ul id="treeDemo" class="ztree"></ul>
<script>
    $(function () {
        var setting = {
            callback: {
                onClick(event, treeId, treeNode) {
                    $("#chasedDepartment").val(treeNode.name);
                    $("#chasedDepartment").attr("department", JSON.stringify(treeNode));

                },
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: '0'
                }
            },
        };
        // 部门ajax获取
        var zNodes = [
            {id: '1', pId: '0', name: "科华控股"},
            {id: '11', pId: '1', name: "信息中心"},
            {id: '12', pId: '1', name: "企划部"}
        ];
        var zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
</script>

</body>
</html>